import allLayouts from "@/components/graph/config/layout.js";
import BreathingCircle from './custom/customCircle'
import {ExtensionCategory, register} from '@antv/g6';

register(ExtensionCategory.NODE, 'breathing-circle', BreathingCircle);

function options(params) {
    const layout = allLayouts[params.layout]
    const padding = params.padding || [20, 20, 20, 20]
    const animation = params.animation || false
    const defaultNodeSize = params.defaultNodeSize || 40
    const nodeLabelSize = params.defaultLabelSize || 16
    const autoFit = params.defaultAutoFit || 'view'
    const defaultNodeFill = params.defaultNodeFill || "#d4e5ff"
    return {
        layout,
        padding,
        animation,
        autoFit,
        autoResize: true,
        zoom: 1,
        node: {
            type: (d) => d?.data?.type || 'breathing-circle',
            style: {
                src: (d) => d?.data?.src,
                size: (d) => {
                    return d?.style?.size || defaultNodeSize
                },
                labelFontSize: (d) => d?.style?.labelFontSize || nodeLabelSize,
                fill: (d) => d?.style?.fill || defaultNodeFill,
                labelFill: (d) => d?.style?.labelFill || 'rgba(0,0,0,0.8)',
                halo: (d) => d.data?.halo || false,
                haloLineWidth: 10,
                // haloVisibility: 'hidden',
                labelTextAlign: 'middle',
                labelBackground: false,
                labelBackgroundFill: 'rgba(0,0,0,0.15)',
                labelBackgroundRadius: 5,
                labelMaxWidth: '220%',
                labelMaxLines: 2,
                labelWordWrap: true,
                ports: [],
                lineWidth: 0,
                stroke: 'rgba(255,255,255,1)',
                fillOpacity: 1,
                labelPlacement: 'bottom',
                labelOffsetY: 4,
                // shadowBlur: 10,
                // shadowType: "outer",
                // shadowColor: 'rgba(0,0,0,0.3)',
                // iconWidth: 50,
                // iconHeight: 50,
                // iconSrc: 'https://img2.baidu.com/it/u=3856718872,2979774853&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=502',
                // iconRadius: 50
            },
            state: {
                selected: {
                    halo: true,
                    lineWidth: 0,
                    labelFontSize: (d) => d?.style?.labelFontSize || nodeLabelSize,
                    labelFontWeight: 'normal',
                    fillOpacity: 1,
                },
                // unselected: {
                //     fillOpacity: 0.2,
                //     strokeOpacity: 0.2,
                //     labelOpacity: 0.2,
                // },
                // highlight: {
                //     opacity: 1,
                //     halo: true,
                //     lineWidth: 0,
                //     labelFontSize: (d) => d?.style?.labelFontSize || nodeLabelSize,
                //     labelFontWeight: 'normal'
                // },
                active: {
                    halo: true,
                    opacity: 1,
                    lineWidth: 0,
                    labelFontSize: (d) => d?.style?.labelFontSize || nodeLabelSize,
                    labelFontWeight: 'normal'
                },
                neighborActive: {
                    // halo: false,
                }
                // inactive: {
                //     halo: false,
                //     opacity: 1,
                //     lineWidth: 0,
                //     fill: 'rgba(208,208,208,0.2)',
                //     labelFontSize: (d) => d?.style?.labelFontSize || nodeLabelSize,
                //     labelFontWeight: 'normal'
                // }
            },
            palette: {
                type: 'group',
                field: 'nodeType',
                // color: ['#5a98d9', '#76a1c7', '#9590e0', '#9eb293', '#bd8c88', '#abaa7e', '#82a2a2']
                color: ['rgba(23,47,206,1)', 'rgba(23,47,206,0.8)', 'rgba(23,47,206,0.7)', 'rgba(23,47,206,0.6)', 'rgba(23,47,206,0.5)']
            }
        },
        edge: {
            type: 'line',
            style: {
                labelFill: "rgba(0,0,0,0.8)",
                stroke: "rgba(199,225,246,0.8)",
                lineWidth: 2,
                endArrow: true,
                labelFontSize: 14,
                labelBackground: false,
                labelBackgroundFill: '#1783ff',
                labelBackgroundStroke: '#1783ff',
                labelBackgroundLineWidth: 1,
                labelBackgroundRadius: 4,
                labelBackgroundOpacity: 0.8,
                labelPadding: [2, 4],
            },
            state: {
                selected: {
                    fillOpacity: 1,
                    opacity: 1,
                },
                // unselected: {
                //     fillOpacity: 0.2,
                //     strokeOpacity: 0.2,
                //     labelOpacity: 0.2
                // },
            }
        },
        behaviors: [
            'zoom-canvas',
            'drag-canvas',
            'drag-element',
            {
                type: "click-select",
                degree: true,
                state: "selected",
                unselectedState: "unselected",
                neighborState: 'neighborActive',
            }
        ],
        plugins: [
            {
                type: "fullscreen"
            },
            // {
            //     type: 'legend',
            //     nodeField: 'nodeType',
            //     gridRow: 1,
            //     gridCol: 6,
            //     width: 1000,
            //     height: 20,
            //     itemSpacing: 15,
            //     colPadding: 15,
            //     position: "bottom",
            //     itemLabelFontSize: 18,
            //     itemMarkerSize: 16,
            //     containerStyle: {
            //         background: "#200b0b"
            //     }
            // }
        ]
    }
}

export default options
